﻿<%--*AutoLoadForm 自定义表单解释Page
* 创建：江怀玉
* 日期:
* 版本
*修改日期：2012-11-15
*修改说明：加uni-form-validation.jquery.js表验证，加uni-form.css、qunit.css、default.uni-form.css样式
*          删除：base.css、formReForm.css样式 ,保存成功后，返回主键ID!
*--%>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoLoadDojoForm.aspx.cs" Inherits="iSun.WebApp.AutoLoadDojoForm" %>
<!DOCTYPE html>
<html >
<head id="Head1" runat="server">
    <title></title>
    <link rel="stylesheet" href="../dojo-release-1.7.2-src/dojo/resources/dojo.css"type="text/css" />
    <link rel="stylesheet" href="../dojo-release-1.7.2-src/dijit/themes/claro/claro.css" />
<script>    dojoConfig = { parseOnLoad: true }</script>	<script type="text/javascript" src="../dojo-release-1.7.2-src/dojo/dojo.js"></script>
<script>                                                                       require(["dojo/parser", "dijit/form/Button"]);</script>
</head>
<body class="claro">
    <div  id="myForm" data-dojo-id="myForm"
encType="multipart/form-data" action="" method="">
    <script type="dojo/on" data-dojo-event="reset">
        return confirm('Press OK to reset widget values');
    </script>
    <script type="text/javascript" language="javascript">
        require(["dojo",
            "dojo/store",
			"dijit/dijit",
			"dijit/dijit-all",
			"dojo/parser"]);
       
    </script>

    <script type="dojo/on" data-dojo-event="submit">
        if(this.validate()){
            return confirm('Form is valid, press OK to submit');
        }else{
            alert('Form contains invalid data.  Please correct first');
            return false;
        }
        return true;
    </script>
  
    <table style="border: 1px solid #9f9f9f;" cellspacing="10">
        <tr>
            <td>
                <label for="name">Name:</label>
            </td>
            <td>
                <input type="text" id="name" name="name" required="true" data-dojo-type="dijit/form/DateTextBox"/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="dob">Date of birth:</label>
            </td>
            <td >
                <input type="text" id="dob" name="dob" data-dojo-type="dijit/form/NumberTextBox"/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="dob">Date of birth:</label>
            </td>
            <td >
                <input type="text" id="Text1" name="dob" data-dojo-type="dijit/form/DateTextBox"/>
            </td>
        </tr>
    </table>


    <button data-dojo-type="dijit/form/Button" type="button" onClick="console.log(myForm.getValues())">Get Values from form!</button>
    <button data-dojo-type="dijit/form/Button" type="submit" name="submitButton" value="Submit">Submit</button>
    <button data-dojo-type="dijit/form/Button" type="reset">Reset</button>
</div>
</body>
</html>


<%--
dom 操作
http://dojotoolkit.org/documentation/tutorials/1.8/dom_functions/
--%>
<%--
// 动态创建元素
require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"],
    function(dom, domConstruct) {
 
        var list = dom.byId("list"),
            three = dom.byId("three");
 
        domConstruct.create("li", {
            innerHTML: "Six"
        }, list);
 
        domConstruct.create("li", {
            innerHTML: "Seven",
            className: "seven",
            style: {
                fontWeight: "bold"
            }
        }, list);
 
        domConstruct.create("li", {
            innerHTML: "Three and a half"
        }, three, "after");
 
});--%>



<%--
动态绑定方法 顺序移动
require(["dojo/dom", "dojo/dom-construct", "dojo/on", "dojo/domReady!"],
    function(dom, domConstruct, on){
 
        function moveFirst(){
            var list = dom.byId("list"),
                three = dom.byId("three");
 
            domConstruct.place(three, list, "first");
        }
 
        function moveBeforeTwo(){
            var two = dom.byId("two"),
                three = dom.byId("three");
 
            domConstruct.place(three, two, "before");
        }
 
        function moveAfterFour(){
            var four = dom.byId("four"),
                three = dom.byId("three");
 
            domConstruct.place(three, four, "after");
        }
 
        function moveLast(){
            var list = dom.byId("list"),
                three = dom.byId("three");
 
            domConstruct.place(three, list);
        }
 
        // Connect the buttons
        on(dom.byId("moveFirst"), "click", moveFirst);
        on(dom.byId("moveBeforeTwo"), "click", moveBeforeTwo);
        on(dom.byId("moveAfterFour"), "click", moveAfterFour);
        on(dom.byId("moveLast"), "click", moveLast);
 
});--%>

<%-- 
事件支持
http://dojotoolkit.org/documentation/tutorials/1.8/events/
--%>